<template>
    <template v-if="url">
        <div class="image_box">
            <el-image :src="url" fit="cover" class="image">
                <template #error>
                    <img
                        v-show="route.query.imgTextType == '4'"
                        class="image_error"
                        src="/static/file/mp3.png"
                        alt="" />
                    <el-icon v-show="route.query.imgTextType != '4'">
                        <icon-picture />
                    </el-icon>
                </template>
            </el-image>
            <div
                v-if="route.query.imgTextType != 'look'"
                class="msk_box"
                @mouseenter="mskVisible = true"
                @mouseleave="mskVisible = false">
                <el-icon v-if="mskVisible" @click="onDelete">
                    <delete />
                </el-icon>
            </div>
        </div>
    </template>
    <el-upload
        v-else
        action=""
        :accept="rule.type"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="handleChange">
        <div class="btn_box">
            <div class="icon">
                <el-icon>
                    <Plus />
                </el-icon>
            </div>
            <div class="text">{{ buttonName }}</div>
        </div>
    </el-upload>
</template>
<script lang="ts" setup>
import { playTime } from '@/utils/utils';

import { ref, withDefaults, defineProps, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { uploadFile2 } from '@/api/common';
import { useRoute } from 'vue-router';
import bus from '@/utils/bus';
interface Props {
    url?: string;
    rule?: any;
    buttonName?: any;
    typeName?: any;
}
const props = withDefaults(defineProps<Props>(), {
    url: '',
    buttonName: '点击上传',
    rule: () => {
        return {
            type: '.jpg, .jpeg, .png',
            unit: 'MB',
            size: 20
        };
    },
    typeName: '图片'
});
const route = useRoute();
const emit = defineEmits(['submit']);
const mskVisible = ref(false);
const onShowMsk = () => {
    mskVisible.value = true;
};
// 上传图片
const handleChange = async (file: any) => {
    const fileName = file.name.split('.');
    const fileType = fileName.pop().toLowerCase();
    // 音频时长
    let audioTime = 0;
    if (!props.rule.type.includes(fileType)) {
        ElMessage.error('上传文件类型不正确, 请重新上传!');
        return;
    }
    if (props.rule.unit === 'KB') {
        if (file.size / 1024 > props.rule.size) {
            ElMessage.error(`${props.typeName}大小不能超过${props.rule.size}KB`);
            return;
        }
    }
    if (props.rule.unit === 'MB') {
        if (file.size / 1024 / 1024 > props.rule.size) {
            ElMessage.error(`${props.typeName}大小不能超过${props.rule.size}MB`);
            return;
        }
    }
    // 获取音频时长
    if (route.query.imgTextType == '4') {
        const duration: any = await playTime(file.raw);
        audioTime = duration;
        if (audioTime > 60) {
            ElMessage.error('音频时长不能超过60秒');
            return;
        }
    }
    uploadFile2({
        file: file.raw,
        fileName: file.name
    }).then((res: any) => {
        if (route.query.imgTextType == '4') {
            Object.assign(res, { audioTime });
            bus.emit('audio', res);
        }
        emit('submit', res.url);
    });
};
// 删除图片
const onDelete = () => {
    route.query.imgTextType == '4' && bus.emit('audio', false);
    emit('submit', '');
};
watch(
    () => props.url,
    () => {
        mskVisible.value = false;
    }
);
</script>
<style lang="scss" scoped>
.btn_box {
    width: 110px;
    height: 110px;
    color: #ff6b00;
    text-align: center;
    border: 1px dashed #d9d9d9;
    background: #f9f9f9;
    border-radius: 6px;

    .icon {
        transform: translateY(13px);
        font-size: 22px;
        font-weight: 700;
    }

    .text {
        transform: translateY(26px);
    }

    &:hover {
        border: 1px dashed #ff6b00;
    }
}

.image_box {
    max-height: 112px;
    position: relative;

    .image {
        width: 110px;
        height: 110px;
        box-sizing: border-box;
        border-radius: 3px;
        border: 1px solid #c0ccda;
        font-size: 60px;
    }

    .image_error {
        width: 110px;
        height: 110px;
        box-sizing: border-box;
        border-radius: 3px;
        font-size: 60px;
    }

    .msk_box {
        position: absolute;
        top: 0;
        left: 0;
        width: 110px;
        height: 110px;
        box-sizing: border-box;
        border-radius: 3px;
        display: grid;
        place-content: center;
        background-color: rgb(0 0 0 / 0%);
        font-size: 30px;

        .el-icon {
            color: #fff;
            cursor: pointer;

            &:hover {
                color: #f56c6c;
            }
        }

        &:hover {
            background-color: rgb(0 0 0 / 50%);
        }
    }
}
</style>
